<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增站点优惠券')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: ztree-css"/>
    <th:block th:include="include :: select2-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-coupon-add">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">优惠券名称：</label>
            <div class="col-sm-8">
                <input name="title" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">适用油品：</label>
            <div class="col-sm-6">
                <select id="productId" class="form-control select2-multiple" multiple>
                    <option th:each="one:${petrolList}" th:value="${one.productId}" th:text="${one.productCategory+one.productName}" th:selected="${one.selected}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">使用门槛(满X元可用）：</label>
            <div class="col-sm-4">
                <div class="input-group">
                    <input name="reachAmount" min="0" oninput="if(value<0)value=0" class="form-control" type="number"
                           placeholder="填写0则表示无使用门槛" required>
                    <span class="input-group-addon">元</span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">优惠券类型：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('coupon_type')}">
                    <input type="radio" th:id="${dict.dictCode}" name="couponType" th:value="${dict.dictValue}"
                           th:checked="${dict.default}">
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>
        <div class="form-group" id="type1Box">
            <label class="col-sm-3 control-label"><span style="color: red; ">*</span>面额：</label>
            <div class="col-sm-4">
                <div class="input-group">
                    <input name="faceValue" min="1" oninput="if(value<0)value=1" class="form-control"
                           placeholder="代金券面额，填写整数" type="number" value="10">
                    <span class="input-group-addon">元</span>
                </div>
            </div>
        </div>
        <div class="form-group" id="type2Box">
            <label class="col-sm-3 control-label"><span style="color: red; ">*</span>折扣值：</label>
            <div class="col-sm-4">
                <input name="discount" max="0.99" min="0.01" oninput="if(value>0.99 || value<0.01)value=0.01"
                       step="0.01" class="form-control" placeholder="如9.1折，填写0.91" type="number" value="0.91">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"><span style="color: red; ">*</span>总发放量：</label>
            <div class="col-sm-4">
                <div class="input-group">
                    <input name="totalIssuance" min="1" oninput="if(value<0)value=1" class="form-control"
                           placeholder="请填写总发放量，每个会员仅能领取一张" type="number"
                           required>
                    <span class="input-group-addon">张</span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"><span style="color: red; ">*</span>使用开始时间：</label>
            <div class="col-sm-4">
                <div class="input-group date">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    <input name="useStartTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"><span style="color: red; ">*</span>使用结束时间：</label>
            <div class="col-sm-4">
                <div class="input-group date">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    <input name="useEndTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                </div>
            </div>
        </div>
        <!--<div class="form-group">-->
            <!--<label class="col-sm-3 control-label"><span style="color: red; ">*</span>状态：</label>-->
            <!--<div class="col-sm-8">-->
                <!--<div class="radio-box" th:each="dict : ${@dict.getType('coupon_status')}">-->
                    <!--<input type="radio" th:id="${dict.dictCode}" name="couponStatus" th:value="${dict.dictValue}"-->
                           <!--th:checked="${dict.default}">-->
                    <!--<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <div class="form-group">
            <label class="col-sm-3 control-label">是否注册赠送：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('is_enable')}">
                    <input type="radio" th:id="${dict.dictCode}" name="isAbleActivity"
                           th:value="${dict.dictValue}" th:checked="${dict.default}">
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"><span style="color: red; ">*</span>是否上架：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('is_enable')}">
                    <input type="radio" th:id="${dict.dictCode}" name="isEnable" th:value="${dict.dictValue}"
                           th:checked="${dict.default}">
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注：</label>
            <div class="col-sm-6">
                <textarea id="remark" name="remark" class="form-control"></textarea>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: ztree-js"/>
<script type="text/javascript">
    var prefix = ctx + "back/shopCoupon";
    $("#type1Box").show();
    $("#type2Box").hide();

    $('input').on('ifChecked', function (event) {
        if ($(event.target).attr("name") == "couponType") {
            var radio = $(event.target).val();
            if (radio == "1") {
                $("#type1Box").show();
                $("#type2Box").hide();
            } else if (radio == "2") {
                $("#type1Box").hide();
                $("#type2Box").show();
            }
        }
    });

    $('#productId').select2({
        placeholder: "请选择优惠券可用于哪些油品",
        allowClear: true
    });

    $("input[name='useStartTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='useEndTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.ajax({
                cache: true,
                type: "POST",
                url: prefix + "/add",
                data: {
                    "id": $("input[name='id']").val(),
                    "title": $("input[name='title']").val(),
                    "productIdArr": $.form.selectSelects("couponId"),
                    "reachAmount": $("input[name='reachAmount']").val(),
                    "couponType": $("input[name='couponType']:checked").val(),
                    "faceValue": $("input[name='faceValue']").val(),
                    "discount": $("input[name='discount']").val(),
                    "totalIssuance": $("input[name='totalIssuance']").val(),
                    "useStartTime": $("input[name='useStartTime']").val(),
                    "useEndTime": $("input[name='useEndTime']").val(),
                    "couponStatus": $("input[name='couponStatus']:checked").val(),
                    "isAbleActivity": $("input[name='isAbleActivity']:checked").val(),
                    "isEnable": $("input[name='isEnable']:checked").val(),
                    "remark": $("#remark").val(),
                },
                async: false,
                error: function (request) {
                    $.modal.alertError("系统错误");
                },
                success: function (data) {
                    $.operate.successCallback(data);
                }
            });
        }
    }
</script>
</body>
</html>